<template>
  <el-dialog
    v-dialogDrag
    :title="title"
    :visible.sync="showAdd"
    :append-to-body="true"
    :close-on-click-modal="false"
    :show-close="true"
    :before-close="clear"
    width="80%"
  >

    <div class="searchform">
      <el-collapse v-model="collapseModel">
        <el-collapse-item title="基础信息" name="1">
          <el-form ref="addDiaForm" :model="entity" :disabled="pageType=='view'" :rules="rule" label-width="90px">
            <el-row :gutter="8">
              <el-col :xs="24" :sm="6" :md="6">
                <el-form-item prop="series_id" label="产品小类">
                  <r-select
                    v-validate="'required'"
                    :disabled="pageType=='edit'"
                    v-model="entity.series_id"
                    selectid="series_id"
                    selectname="series_name"
                    url="/productDisplay/getTmSeies"
                    model="DMSCLOUD_VEHICLE"
                    placeholder="请选择产品小类"
                    filterable
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="6" :md="6">
                <el-form-item prop="context_status" label="有效状态">
                  <r-select v-validate="'required'" v-model="entity.context_status" :formatter="filterCode" placeholder="有效状态" type="1001"/>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="6" :md="6">
                <el-form-item prop="is_order" label="是否下单">
                  <r-select v-validate="'required'" v-model="entity.is_order" :formatter="filterCode" placeholder="立即下单" type="1004"/>
                </el-form-item>
              </el-col>

              <!-- <el-col :xs="24" :sm="6" :md="6">
                <el-form-item prop="context_type" label="类型">
                  <r-select v-validate="'required'" v-model="entity.context_type" :formatter="filterCode" placeholder="类型" type="9250" />
                </el-form-item>
              </el-col> -->
            </el-row>
          </el-form>
        </el-collapse-item>
        <!-- v-if="entity.context_type == 92501001"  -->
        <el-collapse-item title="封面信息" name="2">
          <ImgItemSingle :disabled="pageType=='view'" :file-list.sync="fileList4cover" :size-tips="coverSize"/>

        </el-collapse-item>
        <el-collapse-item title="外观360旋转多图" name="3">
          <ImgItem :disabled="pageType=='view'" :file-list.sync="fileList4appearance360" :size-tips="imgSize" :limit="100" :multiple="true" accept-type-str=".jpg,.png"/>
        </el-collapse-item>

        <el-collapse-item title="内饰全景图" name="4">
          <ImgItemSingle :disabled="pageType=='view'" :file-list.sync="fileList4innerPanoramic" :size-tips="imgSize"/>
        </el-collapse-item>
        <el-collapse-item title="展图、视频" name="5">
          <div class="table">
            <div class="tableHead">
              <div class="title">展图项维护</div>
              <el-button v-if="pageType!='view'" type="text" icon="el-icon-plus" @click="exhibitionItems.push({items:[],is_slide:10041001,context_seq:rowSeqIndex4exhibitionItems}) ">项新增</el-button>
              <i class="sizeTip">视频小程序仅支持MP4，图片建议1125px*自定义高度，同一项建议高度一致</i>
            </div>
            <el-table
              :data="exhibitionItems"
              tooltip-effect="dark"
              highlight-current-row
              border
            >
              <el-table-column align="center" fixed label="序号" width="50" type="index"/>
              <el-table-column
                v-if="pageType!='view'"
                prop="dtl_seq"
                fixed
                label="操作"
                width="50">
                <div slot-scope="scope">
                  <!-- @click="" fileList.splice((scope.index -1),1) -->
                  <el-button class="el-icon-delete" size="mini" type="text" style="font-size: 20px;" @click="exhibitionItems.splice(scope.$index,1)" />
                </div>
              </el-table-column>
              <el-table-column align="left" fixed label="项目" width="600" >
                <template slot-scope="scope">

                  <ImgvideoItem :disabled="pageType=='view'" :file-list.sync="scope.row.items" :limit="20" :multiple="true" accept-type-str=".jpg,.png,.mp4"/>

                </template>
              </el-table-column>
              <el-table-column
                prop="is_slide"
                label="是否左右滑动"
                width="100">
                <div slot-scope="scope">
                  <r-select v-model="scope.row.is_slide" type="1004"/>
                </div>
              </el-table-column>
              <el-table-column
                prop="context_seq"
                label="排序"
                width="100">
                <div slot-scope="scope">
                  <el-input :disabled="pageType=='view'" v-model="scope.row.context_seq" class="input1" placeholder="必填"/>
                </div>
              </el-table-column>
            </el-table>

          </div>
        </el-collapse-item>

        <el-collapse-item title="配置图" name="6">
          <div class="table">
            <div class="tableHead">
              <div class="title">配置项维护</div>
              <el-button v-if="pageType!='view'" type="text" icon="el-icon-plus" @click="configItems.push({items:[],is_slide:10041001,context_seq:rowSeqIndex4configItems}) ">项新增</el-button>
              <i class="sizeTip">视频小程序仅支持MP4，图片建议1125px*自定义高度，同一项建议高度一致</i>
            </div>
            <el-table
              :data="configItems"
              tooltip-effect="dark"
              highlight-current-row
              border
            >
              <el-table-column align="center" fixed label="序号" width="50" type="index"/>
              <el-table-column
                v-if="pageType!='view'"
                prop="dtl_seq"
                fixed
                label="操作"
                width="50">
                <div slot-scope="scope">
                  <!-- @click="" fileList.splice((scope.index -1),1) -->
                  <el-button class="el-icon-delete" size="mini" type="text" style="font-size: 20px;" @click="configItems.splice(scope.$index,1)" />
                </div>
              </el-table-column>
              <el-table-column align="left" fixed label="项目" width="600" >
                <template slot-scope="scope">

                  <ImgvideoItem :disabled="pageType=='view'" :file-list.sync="scope.row.items" :limit="20" :multiple="true" accept-type-str=".jpg,.png,.mp4"/>

                </template>
              </el-table-column>
              <el-table-column
                prop="is_slide"
                label="是否左右滑动"
                width="100">
                <div slot-scope="scope">
                  <r-select v-model="scope.row.is_slide" type="1004"/>
                </div>
              </el-table-column>
              <el-table-column
                prop="context_seq"
                label="排序"
                width="100">
                <div slot-scope="scope">
                  <el-input :disabled="pageType=='view'" v-model="scope.row.context_seq" class="input1" placeholder="必填"/>
                </div>
              </el-table-column>
            </el-table>

          </div>
        </el-collapse-item>

      </el-collapse>

    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="text">
        <i class="el-icon-search magnifier" />
      </el-button>
      <el-button v-if="pageType!='view'" :disabled="saveLoading" :loading="fullscreenLoading" type="primary" @click="save">确 定</el-button>
      <el-button @click="clear">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Upload from '@/components/uploads/Upload'

import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import Radio from '@/components/Radio/Radio'
import { addProductDisplay, editProductDisplay, getDetail } from '@/api/vehicle/productDisplay.js'
import ImgItem from '@/components/uploads/ImgItem'
import ImgItemSingle from '@/components/uploads/ImgItemSingle'
import ImgvideoItem from '@/components/uploads/ImgvideoItem'

export default {
  components: {
    Upload,
    rSelect,
    BaseTable,
    Radio,
    ImgItemSingle,
    ImgvideoItem,
    ImgItem
  },
  mixins: [formMixins],
  props: {
    showAdd: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pageType: '',
      isAddOper: false,
      coverSize: [
        { item: '1125px*1092px' }
      ],
      imgSize: [
        { item: '1125px*900px' }
      ],
      // appearance360Szie: [
      //   { item: '1125px*900px' }
      // ],
      // innerPanoramicSzie: [
      //   { item: '1125px*900px' }
      // ],
      fileList4cover: [],
      fileList4appearance360: [],
      fileList4innerPanoramic: [],
      exhibitionItems: [],
      configItems: [],
      collapseModel: ['1', '2', '3', '4', '5', '6'],

      showVieoDetail: false,
      showDetail: false,
      saveLoading: false,
      fullscreenLoading: false,
      fileList: [],
      imglist: [],
      videolist: [],
      poster: [],
      entity: {
        series_id: '',
        context_status: 10011001,
        context_id: '',
        is_order: ''
        // context_type: ''
        // is_slide: 10041002,
        // RECORD_VERSION: ''
      },
      rule: {
        series_id: [{
          required: true,
          message: '请选择产品小类'
        }],
        context_status: [{
          required: true,
          message: '请选择状态'
        }],
        is_order: [{
          required: true,
          message: '请选择是否立即下单'
        }]
      }
    }
  },
  computed: {
    rowSeqIndex4exhibitionItems: function() {
      let currentMaxSeq = 0
      console.log(this.exhibitionItems)
      if (this.exhibitionItems) {
        this.exhibitionItems.forEach((item, index, arr) => {
          if (item.context_seq && Number(item.context_seq) > currentMaxSeq) {
            currentMaxSeq = Number(item.context_seq)
          }
        })
      }
      return currentMaxSeq + 1
    // this.rowSeqIndex = currentMaxSeq + 1
    },
    rowSeqIndex4configItems: function() {
      let currentMaxSeq = 0

      if (this.configItems) {
        this.configItems.forEach((item, index, arr) => {
          if (item.context_seq && Number(item.context_seq) > currentMaxSeq) {
            currentMaxSeq = Number(item.context_seq)
          }
        })
      }
      return currentMaxSeq + 1
    // this.rowSeqIndex = currentMaxSeq + 1
    }
  },
  // 初始化
  mounted() {
  },
  methods: {
    onVideoCoverUpload(arg1) {
      console.log('arg1 is ', arg1)
    },
    handleUploadSuccess(param, param2) {
      // this.imgFile = []
      console.log('param is ', param, param2)
      console.log('this.fileList is ', this.fileList)
      console.log('this.imglist is ', this.imglist)
      // this.fileList.push(param.file)
      // console.log('handleUploadSuccess imgFile is ', this.fileList)
    },
    removeImg(file, fileList) {
      console.log('fileList is ', fileList)
      console.log('file is ', file)
      // this.imgFile = []
    },
    // 初始化
    initAddInfo() {
      this.pageType = 'add'
      this.resetObj()
      // this.entity.is_slide = 10041002
    },
    initeditInfo(data) {
      this.pageType = 'edit'
      this.resetObj()
      getDetail(data.context_main_id).then(res => {
        this.entity = res.baseInfo
        if (res.fileList4cover) {
          this.fileList4cover = res.fileList4cover
        }
        if (res.fileList4appearance360) {
          this.fileList4appearance360 = res.fileList4appearance360
        }
        if (res.fileList4innerPanoramic) {
          this.fileList4innerPanoramic = res.fileList4innerPanoramic
        }
        if (res.exhibitionItems) {
          this.exhibitionItems = res.exhibitionItems
        }
        if (res.configItems) {
          this.configItems = res.configItems
        }
      })
        .catch(err => {
          console.log(err)
        })
      // this.entity = data
    },

    initDetailInfo(data) {
      this.pageType = 'view'
      this.resetObj()
      getDetail(data.context_main_id).then(res => {
        this.entity = res.baseInfo
        if (res.fileList4cover) {
          this.fileList4cover = res.fileList4cover
        }
        if (res.fileList4appearance360) {
          this.fileList4appearance360 = res.fileList4appearance360
        }
        if (res.fileList4innerPanoramic) {
          this.fileList4innerPanoramic = res.fileList4innerPanoramic
        }
        if (res.exhibitionItems) {
          this.exhibitionItems = res.exhibitionItems
        }
        if (res.configItems) {
          this.configItems = res.configItems
        }
      })
        .catch(err => {
          console.log(err)
        })
      // this.entity = data
    },
    validate4detail() {
      if (this.fileList4appearance360 && this.fileList4appearance360.length > 0) {
        let subMsg = '' // 行信息
        for (let i = 0; i < this.fileList4appearance360.length; i++) {
          if (!this.fileList4appearance360[i].dtl_seq) {
            subMsg = subMsg + `序号${i + 1}、`
            // this.saveLoading = false
            // return false
          }
        }
        if (subMsg) {
          const mssage = `外观360旋转多图【${subMsg.substring(0, subMsg.length - 1)}】'排序'不能为空！`
          this.$message({
            type: 'warning',
            message: mssage
          })
          return false
        }
      }
      if (this.exhibitionItems && this.exhibitionItems.length > 0) {
        let subMsg1 = '' // 行信息4排序列

        for (let i = 0; i < this.exhibitionItems.length; i++) {
          if (!this.exhibitionItems[i].context_seq) {
            subMsg1 = subMsg1 + `项序号${i + 1}、`
          }
        }
        if (subMsg1) {
          const mssage = `展图、视频【${subMsg1.substring(0, subMsg1.length - 1)}】'排序'不能为空！`
          this.$message({
            type: 'warning',
            message: mssage
          })
          return false
        }
        let subMsg2 = '' // 行信息4详情

        for (let i = 0; i < this.exhibitionItems.length; i++) {
          if (this.exhibitionItems[i].items && this.exhibitionItems[i].items.length > 0) {
            let tempDetail = null
            for (let j = 0; j < this.exhibitionItems[i].items.length; j++) {
              tempDetail = this.exhibitionItems[i].items[j]
              if (tempDetail.file_type == 'video' && (!tempDetail.imgFileList || tempDetail.imgFileList.length == 0)) {
                subMsg2 = subMsg2 + `项序号${i + 1}、`
                break
              }
            }
          }
        }
        if (subMsg2) {
          const mssage = `展图、视频【${subMsg2.substring(0, subMsg2.length - 1)}】存在视频尚未上传配图！`
          this.$message({
            type: 'warning',
            message: mssage
          })
          return false
        }
      }

      if (this.configItems && this.configItems.length > 0) {
        let subMsg1 = '' // 行信息4排序列

        for (let i = 0; i < this.configItems.length; i++) {
          if (!this.configItems[i].context_seq) {
            subMsg1 = subMsg1 + `项序号${i + 1}、`
          }
        }
        if (subMsg1) {
          const mssage = `配置图【${subMsg1.substring(0, subMsg1.length - 1)}】'排序'不能为空！`
          this.$message({
            type: 'warning',
            message: mssage
          })
          return false
        }
        let subMsg2 = '' // 行信息4详情

        for (let i = 0; i < this.configItems.length; i++) {
          if (this.configItems[i].items && this.configItems[i].items.length > 0) {
            let tempDetail = null
            for (let j = 0; j < this.configItems[i].items.length; j++) {
              tempDetail = this.configItems[i].items[j]
              if (tempDetail.file_type == 'video' && (!tempDetail.imgFileList || tempDetail.imgFileList.length == 0)) {
                subMsg2 = subMsg2 + `项序号${i + 1}、`
                break
              }
            }
          }
        }
        if (subMsg2) {
          const mssage = `配置图【${subMsg2.substring(0, subMsg2.length - 1)}】存在视频尚未上传配图！`
          this.$message({
            type: 'warning',
            message: mssage
          })
          return false
        }
      }
      return true
    },

    save() {
      this.$refs['addDiaForm'].validate(valid => {
        if (valid) {
          // const that = this
          this.saveLoading = true
          if (!this.validate4detail()) {
            this.saveLoading = false
            return false
          }
          // if (!this.fileList4cover || this.fileList4cover.length == 0) {
          // this.$message({
          //   type: 'warning',
          //   message: '请上传图片！'
          // })
          // this.saveLoading = false
          // return false
          // }

          this.entity.fileList4cover = this.fileList4cover
          this.entity.fileList4appearance360 = this.fileList4appearance360
          this.entity.fileList4innerPanoramic = this.fileList4innerPanoramic
          this.entity.exhibitionItems = this.exhibitionItems
          this.entity.configItems = this.configItems
          console.log('this.entity is ', this.entity)
          if (this.pageType == 'add') {
            addProductDisplay(this.entity).then(res => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.saveLoading = false
              this.fullscreenLoading = false
              this.clear()
            })
              .catch(err => {
                console.log(err)
                this.saveLoading = false
                this.fullscreenLoading = false
              })
          } else {
            editProductDisplay(this.entity).then(res => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.saveLoading = false
              this.fullscreenLoading = false
              this.clear()
            })
              .catch(err => {
                console.log(err)
                this.saveLoading = false
                this.fullscreenLoading = false
              })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请完成填写'
          })
          this.saveLoading = false
          this.fullscreenLoading = false
        }
      })
    },
    resetObj(obj) {
      this.entity = {
        series_id: '',
        context_type: '',
        context_status: 10011001,
        context_id: ''
        // is_slide: 10041002,
        // RECORD_VERSION: ''
      }
      this.fileList4cover = []
      this.fileList4appearance360 = []
      this.fileList4innerPanoramic = []
      this.exhibitionItems = []
      this.configItems = []
      // for (const key in obj) {
      //   obj[key] = ''
      // }
    },
    // 返回清空列表
    clear() {
      this.type = ''
      this.$parent.searchHandle()
      this.$emit('update:showAdd', false)
    }
  }
}
</script>

<style scoped>

  el-upload-upload {
    height:20px;
    width:100%;
  }

  .new-order-wrapper {
    padding: 10px 20px;
  }

  .new-order-wrapper .el-step__title {
    font-size: 14px;
  }

  .row-line {
    width: 100%;
  }

  .bm-view {
    width: 100%;
    height: 300px;
  }
  .redItem .el-form-item__label{
    color: indianred;
  }

.input1 {
    min-height: 30px;
    margin: 0px;
    width: 50px;
}
.sizeTip{
  font-style: normal;
    margin-bottom: 8px;
    font-size: 13px;
    color: rgb(255, 0, 13);
    height: 12px;

  }
</style>
